<template>
  <div class="web_head">
    <div class="content">
      <div class="logo">
        <h4 @click="handleToHome">
          普适智能
        </h4>
      </div>
      <div class="nav_bar">
        <ul>
          <li :class="$store.state.navIndex== index ?'active':''" v-for="item,index in navBar" @click="handleToPath(item,index)">{{item.title}}</li>
        </ul>
      </div>
    </div>
    <div class="content_move">
      <div class="logo ml16">
        <h4 @click="handleToHome">
          普适智能
        </h4>
      </div>
      <div @click="handleMore" class="more mr16" >
        <img src="../../assets/nav_more.png"/>
      </div>
    </div>
    <el-drawer
      title="我是标题"
      :visible.sync="drawer"
      size="50%"
      :with-header="false">
      <el-menu
        :default-active="String($store.state.navIndex)"
        @select="handleToPathMove"
        class="el-menu-vertical-demo"
        background-color="rgba(129, 48, 142, 1)"
        text-color="#fff"
        active-text-color="#d6b97f">
        <el-menu-item :index="String(index)" v-for="(item, index) in navBar" :key="index">
          <span slot="title">{{ item.title }}</span>
        </el-menu-item>
      </el-menu>
    </el-drawer>
  </div>
</template>
<script>
  import router from '@/router';
  export default {
    components: {},
    name: "web_head",
    props: {
      navBar:{
        type: Array,
        default: [{
          title:'首页',
          url:''
        },{
          title:'软件动态',
          url:''
        },{
          title:'文档下载',
          url:''
        },{
          title:'关于我们',
          url:''
        }]
      },
      next: {
        type: String,
        default: ""
      }
    },
    data() {
    return{
      beforeUrl:'',
      drawer:false,
    }
  },
    methods: {
      // 页面跳转
      handleToPath(item,index) {
        this.$store.commit('navIndexCount',index)
        router.push({
          path: item.url
        })
        if(this.$route.path == '/home' && item.title != '关于我们'){
          document.getElementById("banner").scrollIntoView({ behavior: "smooth", block: "start", inline: "nearest" })
          
        }
        this.$emit('change',item)
        

      },

      handleToPathMove(index){
        this.$store.commit('navIndexCount',index)
        this.drawer = false
        let item = this.navBar[index]
        router.push({
          path: item.url
        })
        if(this.$route.path == '/home' && item.title != '关于我们'){
          document.getElementById("banner").scrollIntoView({ behavior: "smooth", block: "start", inline: "nearest" })
        }
        this.$emit('change',item)
      },

      handleMore(){
        this.drawer = true
      },

      handleToHome(){
        router.push({
          path: '/home'
        })
        this.$store.commit('navIndexCount',0)
      }
    },
    mounted(){
    }
  };
</script>
<style>
.el-menu-vertical-demo{
  height:100%;
}
</style>

<style lang="scss" scoped>
.content,.content_move{
  display:none;
}
@media screen and (max-width: 750px) {
  .web_head {
    width: 100%;
    height: 60px;
    background-image:-webkit-linear-gradient( -180deg, rgb(42,39,167) 0%, rgb(130,48,142) 100%);
    .content_move{
      display:block;
      display:flex;
      width:100%;
      height:100%;
      justify-content:space-between;
      align-items:center;
      .logo{
        color:#fff;
      }
      .more{
      }
    }
  }
}

@media screen and (min-width: 750px) {
  .active{
    color: #d6b97f !important;
  }
    .web_head {
      width: 100%;
      height: 70px;
      background-color: rgba(16, 30, 43, 1);
      background-image:-webkit-linear-gradient( -180deg, rgb(42,39,167) 0%, rgb(130,48,142) 100%);
  
      .content {
        display:block;
        margin: 0 auto;
        width: 1300px;
        height: 100%;
        display: flex;
        align-items: center; //上下居中
        justify-content: space-between; //两端对齐
  
        .logo {
          color: #fff;
          
          .el-image {
            width: 180px;
            cursor: pointer;
          }
          h4{
            cursor: pointer;
            font-size: 32px;
          }
        }
  
        .nav_bar{
          margin-left: 100px;
          height: 100%;
          
          ul{
            height: 100%;
            display: flex;
            align-items: center;
            li{
              width: 120px;
              height: 100%;
              list-style: none;
              line-height: 70px;
              display: flex;
            align-items: center;
            justify-content: center;
              color: #fff;
              font-size: 16px;
            }
  
            li:hover{
              cursor: pointer;
              color: #d6b97f;
            }
          }
        }
      }
}



  }
</style>